<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:64.67%">
      <div data-top class="second-sides">1</div>
      <div data-top class="second-center">2</div>
      <div data-top class="second-sides">3</div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div data-bottom class="flex justify-between" style="height:31.29%">
      <div data-bottom class="second-sides">1</div>
      <div data-bottom class="second-center">2</div>
      <div data-bottom class="second-sides">3</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SecondLevel',
  data() {
    return {
      polar: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 25%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
</style>
